<template>
<div class="movie-info" v-if="!canRender">
    <div class="left-con">
        <img :src="handleCoverUrl(state.movie.movie_cover)" @error="imgLoadError" />
        <button class="toPlay" @click="toPlay">立即播放</button>
    </div>
    <div class="right-con">
        <ul>
            <li>
                <strong>电影名称: </strong> {{state.movie.movie_name}}
            </li>
            <li>
                <strong>上映时间: </strong> {{state.movie.movie_on_time}}
            </li>
            <li>
                <strong>电影类型: </strong> {{handleMovieInfo(state.movie.movie_type)}}
            </li>
            <li>
                <strong>电影导演: </strong> {{handleMovieInfo(state.movie.movie_director)}}
            </li>
            <li>
                <strong>电影编剧: </strong> {{handleMovieInfo(state.movie.movie_writer)}}
            </li>
            <li>
                <strong>电影主演: </strong> {{handleMovieInfo(state.movie.movie_main_character)}}
            </li>
            <li>
                <strong>电影国家: </strong> {{handleMovieInfo(state.movie.movie_country)}}
            </li>
            <li>
                <strong>电影简介: </strong> {{state.movie.movie_desc}}
            </li>
        </ul>
    </div>
</div>
</template>

<script>
import {
    onBeforeMount,
    reactive,
    computed
} from "vue"
import {
    getMovieInfo
} from "../utils/fetchData"
import {
    handleCoverUrl,
    handleMovieInfo
} from "../utils/extends"
export default {
    name: "detail",
    props: {
        id: {
            required: true
        }
    },
    setup(props) {
        const state = reactive({
            movie: {}
        })
        onBeforeMount(() => {
            getMovieInfo(props.id, state)
        })
        const canRender = computed(() => {
            return Object.getOwnPropertyNames(state.movie).length == 0;
        })
        const imgLoadError = (event) => {
            event.target.src = "/movie.jpg"
        }
        const toPlay = () => {
            window.open(state.movie.url)
        }
        return {
            state,
            canRender,
            handleCoverUrl,
            handleMovieInfo,
            imgLoadError,
            toPlay
        }
    }
}
</script>

<style lang="sass" scoped>
@import "@/assets/styles/views/detail.scss";
</style>
